<template>
  <view class="player">
    <NavbarRight
      leftIconColor="#333333"
      bgColor="transparent"
      isBack
      :left="{ imageUrl: leftImageUrl, width: '48rpx' }"
    />
    <view class="background"> </view>
    <view class="content">
      <view class="head">
        <view class="records">
          <view
            class="cover-view"
            :class="{ 'records-cover-animation': !pause }"
          >
            <image
              :src="recordsCoverImage"
              mode=""
              class="records-cover"
            ></image>
            <image
              :src="info.cover"
              mode="aspectFill"
              class="audio-cover"
              v-if="info.cover"
            ></image>
          </view>
          <image
            :src="recordsPicksImage"
            mode=""
            class="records-picks"
            :class="{ 'records-picks-animation': !pause }"
          ></image>
        </view>
        <view class="hot-info">
          <view class="hot-title ellipsis-3">
            {{ info.title }}
          </view>
          <view class="author">
            <!-- <text>作者：</text> -->
            <text>{{ info.subtitle }}</text>
          </view>
        </view>
      </view>
      <!-- <audio style="text-align: left" :src="fileUrl" poster="" name="测试" author="作者" controls></audio> -->
      <view class="audio-player">
        <le-audio
          :activeIndex="0"
          :autoplay="false"
          :src="fileUrl"
          @onPause="onPause"
          @onEnded="onEnded"
        ></le-audio>
      </view>
    </view>
    <SubmitButton
      text="查看点评"
      :leftIcon="leftIcon"
      @handleClick="handleComment"
      v-if="readonly"
    ></SubmitButton>
    <BottomButtons
      cancelText="重新录制"
      confirmText="上传录音"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      v-else
    >
    </BottomButtons>
  </view>
</template>

<script setup>
import NavbarRight from "@/components/navbar-right/index.vue";
import SubmitButton from "@/components/submit-button/index.vue";
import BottomButtons from "@/components/bottom-buttons/index.vue";
import LeAudio from "../audio/components/le-audio/le-audio.vue";
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import useRecorderStore from "@/store/recorder.js";
import { storeToRefs } from "pinia";
const recorderStore = useRecorderStore();
const { audioFile } = storeToRefs(recorderStore); // 响应式
import { showToast } from "@/utils/common";
import { getArticleInfo, saveReciteInfo } from "@/api/article";
import { getReciteInfo } from "@/api/records";
import { uploadFileH5 } from "@/utils/uploadFile";
const leftIcon = ref("/static/images/article/luyin@3x.png");
const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
const recordsCoverImage = ref("/static/images/article/changpian@3x.png");
const recordsPicksImage = ref("/static/images/article/changpian2@3x.png");
const id = ref("");
const info = ref({});
const pause = ref(true);
const fileUrl = ref("");
const form = reactive({
  articleId: "",
  audio: "",
  emotion: "",
});
const readonly = ref(false);
const reciteId = ref("");
const editReciteId = ref("");
onLoad((options) => {
  if (options) {
    if (options.id) {
      id.value = options.id;
      form.articleId = options.id;
      getDetail();
    }
    if (options.readonly) {
      readonly.value = true;
    } else {
      fileUrl.value =
        (audioFile && audioFile.value && audioFile.value.path) || "";
    }
    if (options.reciteId) {
      reciteId.value = options.reciteId;
      getReciteDetail();
    }
    if (options.editReciteId) {
      editReciteId.value = options.editReciteId;
    }
    console.log("fileUrl.value", fileUrl.value);
  }
});
const getDetail = async () => {
  try {
    let res = await getArticleInfo({
      id: id.value,
    });
    info.value = res.data;
    console.log(info.value);
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};
const reciteInfo = ref({});
const getReciteDetail = async () => {
  try {
    let res = await getReciteInfo({
      id: reciteId.value,
    });
    reciteInfo.value = res.data;
    fileUrl.value = res.data.audio;
    console.log(reciteInfo.value);
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};

const onPause = (value) => {
  pause.value = value;
};
const onEnded = (value) => {
  pause.value = true;
};

const handleCancel = () => {
  uni.$emit("clear-recorder");
  uni.navigateBack();
};
const handleConfirm = () => {
  beforeUpload();
};

const beforeUpload = () => {
  uploadAudioFile();
};
const uploadAudioFile = async () => {
  // console.log(audioFile.value);
  // console.log(audioFile.value.file);
  if(!audioFile.value||!audioFile.value.file){
    showToast("请先录制音频");
    return false
  }
  uni.showLoading({
    title: "正在上传",
  });
  try {
    let { code, path } = await uploadFileH5({
      url: "/article/recite/upload.php",
      data: {
        record: audioFile.value.file,
      },
    });
    if (code === 0 && path) {
      form.audio = path;
      saveRecite();
    } else {
      uni.hideLoading();
      showToast("上传失败");
    }
  } catch (e) {
    uni.hideLoading();
    console.log(e);
    //TODO handle the exception
  }
};
const saveRecite = async () => {
  try {
    let params = {};
    // 编辑
    if (editReciteId.value) {
      params = {
        reciteId: editReciteId.value,
        audio: form.audio,
      };
    } else {
      params = form;
    }
    let { code } = await saveReciteInfo(params);
    if (code === 0) {
      uni.hideLoading();
      showToast("上传成功", true);
      uni.$emit("records-list-refresh");
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/mine/records/records",
        });
      }, 1000);
    } else {
      uni.hideLoading();
      showToast("上传失败");
    }
  } catch (e) {
    uni.hideLoading();
    console.log(e);
    //TODO handle the exception
  }
};
const handleComment = () => {
  uni.$u.route({
    url: "/pages/article/evaluate/evaluate",
    params: {
      id: reciteId.value,
    },
  });
};
</script>

<style lang="scss" scoped>
.player {
  position: relative;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .background {
    width: 100%;
    height: 780rpx;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
  }

  .content {
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 10;
    padding: 48rpx 32rpx;
    padding-bottom: 128rpx;

    .head {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 80rpx;

      .records {
        width: 340rpx;
        height: 340rpx;
        position: relative;

        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

        .cover-view {
          width: 340rpx;
          height: 340rpx;
          position: relative;
          animation: rotate 18s linear infinite;
          animation-play-state: paused;
          -webkit-animation-play-state: paused;
          /* Safari 和 Chrome */

          .records-cover {
            width: 340rpx;
            height: 340rpx;
            position: relative;
            z-index: 5;
          }

          .audio-cover {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 148rpx;
            height: 148rpx;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            z-index: 8;
          }
        }

        .records-picks {
          position: absolute;
          right: -40rpx;
          top: -40rpx;
          z-index: 10;
          transform: rotate(-35deg);
          transform-origin: 50% 20% 0;
          width: 223rpx;
          height: 263rpx;
        }

        .records-cover-animation {
          animation-play-state: running;
          -webkit-animation-play-state: running;
          /* Safari 和 Chrome */
        }

        .records-picks-animation {
        }
      }

      .hot-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 20rpx;

        .hot-title {
          font-size: 44rpx;
          font-weight: bold;
          color: #1a1a1a;
          line-height: 58rpx;
        }

        .author {
          font-size: 28rpx;
          color: #939999;
          line-height: 28rpx;
          margin-top: 20rpx;
        }
      }
    }

    .article-body {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #939999;
      // height: 176rpx;
      // overflow-y: auto;
    }

    .audio-player {
      padding: 60rpx 0;
    }
  }
}
</style>
